<template>
  <div class="loginBox animate__animated animate__backInDown">
    <div class="data">
      <div style="font-size: 0">
        <img src="../../assets/sdewnc.jpg" alt="" />
      </div>
      <div class="forbox">
        <el-form
          style="width: 400px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item>
            <h3>欢迎登录</h3>
          </el-form-item>
          <el-form-item prop="uname">
            <el-input
              label-width="0px"
              clearable
              placeholder="请输入用户账号"
              v-model="ruleForm.uname"
            >
              <i slot="prefix" class="iconfont icon-wodexinxi"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              clearable
              type="password"
              placeholder="请输入登录密码"
              v-model="ruleForm.password"
            >
              <i slot="prefix" class="iconfont icon-mima"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="button" @click="submitForm"
              >立即登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { chantabs } from "@/router/configRouter.js";
import { login } from "@/api/user.js";
export default {
  data() {
    return {
      ruleForm: {
        uname: "",
        password: "",
      },
      rules: {
        uname: [
          { required: true, message: "请输入登录账户", trigger: "blur" },
          {
            min: 5,
            max: 18,
            message: "长度在 5到 18 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 18,
            message: "长度在 5到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async submitForm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        // debugger
        if (!valid) return;
        login(this.ruleForm).then((res) => {
          localStorage.setItem(
            "xm-token",
            JSON.stringify({
              type: res.data.type == 1 ? "admin" : "user",
              token: res.data.token,
            })
          );
          chantabs().then(() => {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            this.$router.push("/");
          });
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang='scss'>
.loginBox {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .data {
    display: flex;
    align-items: center;
    width: 850px;
    border-radius: 6px;
    box-shadow: 4px 6px 6px #ddd;
    h3 {
      font-weight: 700;
      font-size: 16px;
    }
    img {
      width: 320px;
      height: 420px;
    }
    .forbox {
      display: flex;
      justify-content: center;
      .button {
        width: 100%;
      }
    }
  }
}
</style>
<style>
</style>